import React, { useEffect, useState } from 'react'
import { useAppSelector, useAppDispatch } from '../../app/hooks'
import { useParams } from 'react-router'
import axios from 'axios'
import { NavBar, Swiper, Image, Typography, Cell, ActionBar, Badge } from 'react-vant';
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { useNavigate } from 'react-router';
import { ListItemType } from '../../types'
import moment from 'moment';
import { addShopCar } from '../../app/shopCar/shopCarSlice';
import { useCar } from '../../hooks';


const Detail: React.FC = () => {
  // `state` 参数已正确推断为 `RootState` 类型
  const shopCarList = useAppSelector(state => state.shopcarReducer.ShopCarList)
  const dispatch = useAppDispatch()
  const { totalCount } = useCar()

  const navigate = useNavigate()
  const [detailInfo, setDetailInfo] = useState<ListItemType | null>(null)


  const { id } = useParams()
  const fetchData = async () => {
    const res = await axios.get(`/api/list/${id}`)
    const { data, code } = res.data
    setDetailInfo(data)
  }
  useEffect(() => {
    fetchData()
  }, [id])


  // 点击添加购物车
  const addCar = (item: ListItemType) => {
    console.log(item)
    dispatch(addShopCar(item))
  }

  if (!detailInfo) {
    return <div>数据加载中...</div>
  }
  return (
    <div>
      <NavBar
        title="详情页"
        onClickLeft={() => navigate(-1)}
      />
      <div className="demo-swiper">
        <Swiper autoplay={3000}>
          {
            detailInfo.image.map((item, index) => (
              <Swiper.Item key={index}>
                <img style={{ width: '100vw', height: 180 }} src={item} />
              </Swiper.Item>
            ))
          }
        </Swiper>
      </div>
      {/* 标题 */}
      <Typography.Title level={2}>{detailInfo.title}</Typography.Title>
      {/* 描述 */}
      <Typography.Text>{detailInfo.descript}</Typography.Text>
      {/* 规格 */}
      <Typography.Title strong level={5} style={{ color: "red" }}>
        ￥: {detailInfo.price}
      </Typography.Title>
      {/* 评论列表 */}
      <div>
        <>
          {[...detailInfo.comment].sort((a, b) => {
            return (
              new Date(b.createTime).getTime() -
              new Date(a.createTime).getTime()
            )
          }).map((item, index) => (

            <Cell
              center
              key={index}
              title={
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span>{item.nickname}</span>
                  <span>{
                    moment(item.createTime, "YYYYMMDD").fromNow()
                  }</span>
                </div>
              }
              label={
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{ width: '72%' }}>{item.content}</div>
                  <div style={{ width: '20%' }}>赞：{item.zan}</div>
                </div>
              }
              icon={<Image width={44} height={44} src={item.avator} round />}
            />
          ))}
        </>
      </div>
      <div className='demo-action-bar' style={{ height: 50 }}>
        <ActionBar  >
          <ActionBar.Icon
            icon={<ChatO />}
            text='客服'
            onClick={() => console.log('chat click')}
          />
          <ActionBar.Icon
            icon={
              <Badge content={totalCount}>
                <CartO />
              </Badge>
            }
            text='购物车'
            onClick={() => console.log('cart click')}
          />
          <ActionBar.Icon
            icon={<ShopO />}
            text='店铺'
            onClick={() => console.log('shop click')}
          />
          <ActionBar.Button
            type='danger'
            text='加入购物车'
            onClick={() => addCar(detailInfo)}
          />
        </ActionBar>
      </div>

    </div>
  )

}

export default Detail